<template>
  <div>
    <p class="gl">《 {{this.BlogUploadDTO.musicName}} 》  {{this.BlogUploadDTO.musicId}}   </p>
    <van-field name="uploader" label="上传故事图片">
            <template #input>
              <!-- 上传图片 可以预览图片 -->
                <!-- 检查格式 -->
              <van-uploader v-model="fileList" multiple :max-count="3" :before-read="beforeRead" :after-read="afterRead" />
            </template>

              </van-field>


       <van-field
              v-model="text"
              rows="10"
              type="textarea"
              autosize
              name="音乐故事"
              label="音乐故事"
              placeholder="分享音乐故事"
            
              :rules="[{ required: true, message: '请填写音乐故事' }]"
            />

            <div style="display: flex;justify-content: center;">
              <van-button type="info"  round @click="upload2blog()" >发布音乐故事 </van-button>
            </div>
  </div>
</template>

<script>
import BlogAPI from '@/api/BlogAPI'
import UploadAPI from '@/api/UploadAPI.js'
export default {
 name: "uploadBlog",
 data() {
  return {
    fileList:[],
   
    text:"",
    BlogUploadDTO:{
      imgUrlList:[],
      blogText: "",
      musicId: "",
      musicName: "",
    }
  }
 },



created() {
  this.BlogUploadDTO.musicId=this.ItMusicId
  this.BlogUploadDTO.musicName=this.ItMusicName
},

 methods: {
  beforeRead(file) {
      if (file.type == 'image/jpeg' || file.type == 'image/png') {
        console.log('格式正确');
        return true;
      }else{
        this.$toast('请上传 jpg 格式图片')
        console.log('请上传 jpg 格式图片');
        return false;
      }
    
    },
    // 读取图片文件后
    afterRead(file){
      console.log(file);
      this.uploadIcon(file)
    },
    // 发送上传图片请求
    uploadIcon(file){
    var result = UploadAPI.Upload2Qiniu(file)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.BlogUploadDTO.imgUrlList.push(val.data)
          // console.log(this.musicUploadDTO.musicIcon);
        }else{
          this.$toast(val.errorMsg)
      
        }
            })
      },

      upload2blog(){
        this.BlogUploadDTO.blogText=this.text
        var result = BlogAPI.UploadBlog(this.BlogUploadDTO)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.$toast("发布成功")
          // console.log(this.musicUploadDTO.musicIcon);
          // this.$router.go(0)
        }else{
          this.$toast(val.errorMsg)
      
        }
            })
      }
 },

 props: {
  ItMusicId: {
      required: true,
      type: String
    },
    ItMusicName: {
      required: true,
      type: String
    },
 }
}
</script>

<style scoped>
.gl{
  color: rgb(214, 15, 131);
}
</style>